
import { View, Image } from "@tarojs/components"
import proBg from '../theme/component-icon/pro.png'
import proAct from '../theme/component-icon/pro-act.png'

export const Product = (props: { item: any, highlightId: any, onClickMet: (id) => void }) => {
    const { item, onClickMet, highlightId } = props
    return <View className="w-full bg-cover relative mb-[32px] py-[44px] px-[46px] bg-no-repeat bg-center" key={item.id} style={{ backgroundImage: `url(${item.id === highlightId ? proAct : proBg})` }} onClick={() => { onClickMet(item.id) }}>
        <View className="flex items-center mb-[36px]">
            <Image src={`http://47.96.138.184/images/trons/${item.s}qukuailian.png`} className="h-[32px] w-[32px]" mode="heightFix" />
            <View className="px-[16px] font-medium text-[32px] text-[#ffffff] ">
                {
                    item.name
                }
            </View>
        </View>
        <View className="flex items-center mb-[26px]">
            <View className="w-max h-[64px] pl-[16px] pr-[12px] rounded-[8px] inline-flex items-center bg-[#26DBDC] text-[28px] text-[#ffffff]" >
                {
                    `每日收益率 ${item.rate}%`
                }
            </View>
            <View className="w-max h-[64px] pl-[16px] pr-[12px] rounded-[8px] inline-flex items-center bg-[#3E9AED] text-[28px] text-[#ffffff] ml-[16px]" >
                {
                    `周期 ${item.period}周`
                }
            </View>
        </View>
        <View className="w-full h-[1px] border-[2px] border-[#4539A4] border-dashed border-x-0 border-t-0 mb-[26px]"></View>
        <View className="text-[30px] text-[#ffffff]">{`最低投资 ${item.min}USDT`}</View>
    </View>
}